<template>
  <el-dialog
    title="自定义快捷标签筛选"
    :visible="dialogVisible"
    :close-on-click-modal="false"
    custom-class="custom-dialog"
    @open="resetTags"
    @close="closeDialog"
    width="600px"
  >
    <el-form>
      <el-form-item>
        <tag-select :selected-tags.sync="tags" :limit="8"></tag-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="flex content-space-between">
      <el-button type="primary" @click="saveTags" :loading="loading">保存</el-button>
      <el-button @click="closeDialog">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { formatSpace } from '@/components/spaces/format';
import TagSelect from '@/components/shared/TagSelect';

export default {
  name: 'settings-quick-tags',
  components: { TagSelect },
  props: {
    dialogVisible: Boolean,
  },
  data() {
    return {
      tags: [],
      loading: false,
    };
  },
  computed: {
    ...mapState({ curSpace: 'currentSpace' }),
  },
  methods: {
    ...mapActions(['setCurrentSpace']),
    resetTags() { this.tags = JSON.parse(JSON.stringify(this.curSpace.quickTags)); },
    closeDialog() { this.$emit('update:dialogVisible', false); },
    saveTags() {
      this.loading = true;
      this.$api.spaceResources.saveQuickTags({
        spaceId: this.$route.params.spaceId,
        tags: this.tags,
      }).then((res) => {
        this.$message.success('设置成功');
        this.setCurrentSpace(formatSpace(res.data));
        this.closeDialog();
      }).catch(() => {})
        .then(() => { this.loading = false; });
    },
  },
};
</script>

<style></style>
